<template>
  <u-navbar title="我的" fixed border leftIcon="" leftText=""></u-navbar>
  <view class="page_wrap_container" :style="{ paddingTop: NavBarHeight + 'px', height: windowHeight + 'px' }">
    <scroll-view scroll-y enhanced enable-flex :show-scrollbar="false" class="mine_page_container">
      <view class="user_info_box">
        <image class="user_header" :src="userInfo.user_avatar ? userInfo.user_avatar : headerImg" alt="" />
        <view class="info_detail" v-if="hasLogin">
          <view class="user_name">{{ userInfo.userName }}</view>
          <view class="user_info" v-if="userInfo.workId">工号：{{ userInfo.workId }} </view>
          <view class="user_info">组织：{{ userInfo.orgName }} </view>
        </view>
        <view class="no_login_box" v-else>
          <text class="nlb_top">未登录</text>
          <text class="no_login_text">请授权登录</text>
        </view>
      </view>
      <view class="service_data">
        <view class="sd_top">
          <view class="sdtop_title">待办事项</view>
        </view>
        <!-- #ifndef H5 -->
        <view class="data_card">
          <view class="dc_l" @click.stop="gotoPurchaseContract">
            <view class="dcl_num">{{ pageDetails?.contractPerSubmitCount || 0 }}</view>
            <view class="dcl_text">提交合同</view>
          </view>
          <view class="dc_r">
            <view class="dcr_t" @click.stop="gotoPurchaseQC">
              <view class="dcrt_num">{{ pageDetails?.qcPerformCount || 0 }}</view>
              <view class="dcrt_text">执行QC</view>
            </view>
            <view class="dcr_b" @click.stop="gotoPurchaseCheck">
              <view class="dcrt_num">{{ pageDetails?.perAuditCount || 0 }}</view>
              <view class="dcrt_text">审核发货单</view>
            </view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="data_card">
          <view class="dc_l" @click.stop="gotoPurchaseContractSign">
            <view class="dcl_num">{{ pageDetails?.contractPerSubmitCount || 0 }}</view>
            <view class="dcl_text">签署合同</view>
          </view>
          <view class="dc_r">
            <view class="dcr_t" @click.stop="gotoPurchaseQCReply">
              <view class="dcrt_num">{{ pageDetails?.qcPerformCount || 0 }}</view>
              <view class="dcrt_text">回复QC</view>
            </view>
            <view class="dcr_b" @click.stop="gotoPurchaseCheckIsSend">
              <view class="dcrt_num">{{ pageDetails?.perAuditCount || 0 }}</view>
              <view class="dcrt_text">确认发货</view>
            </view>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import HTTP from "@/utils/http"
import headerImg from '@/static/images/index/header.png'
import { onShow } from '@dcloudio/uni-app';
const userInfo = uni.getStorageSync('user_info') || {}
const hasLogin = ref(true)
import useScreenSize from "@/hooks/useScreenSize"
const { windowHeight, NavBarHeight, isIphoneX } = useScreenSize()
const pageDetails = ref<Record<string, any>>({})
onShow(() => {
  const token = uni.getStorageSync("token")
  if (!token) {
    uni.navigateTo({ url: "/pages/login/index" })
    return
  }
  // #ifndef H5
  getToDoList()
  // #endif
  // #ifdef H5
  getSupplierUserToDoList()
  // #endif
})
const gotoPurchaseContract = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=contractStatus&value=0" })
}
const gotoPurchaseQC = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=qualityStatus&value=5" })
}
const gotoPurchaseCheck = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=reserveInvoiceStatus&value=1" })
}
const gotoPurchaseContractSign = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=contractStatus&value=1" })
}
const gotoPurchaseQCReply = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=qualityStatus&value=1" })
}
const gotoPurchaseCheckIsSend = () => {
  uni.navigateTo({ url: "/pages/purchase/index?select=reserveInvoiceStatus&value=2" })
}
const getToDoList = () => {
  HTTP.POST({
    url: "sop/sop/system/user/getUserToDoList",
    isJson: true,
    data: {},
    success: (res: any) => {
      if (res.code == 200) {
        pageDetails.value = res.data
      }
    }
  })
}
const getSupplierUserToDoList = () => {
  HTTP.POST({
    url: "sop/sop/system/user/getSupplierUserToDoList",
    isJson: true,
    data: {},
    success: (res: any) => {
      if (res.code == 200) {
        pageDetails.value = res.data
      }
    }
  })
}
</script>
<style lang="scss" scoped>
.page_wrap_container {
  .user_info_box {
    height: 188rpx;
    background: #ffffff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    padding: 24rpx;
    margin: 0 24rpx;
    margin-top: 24rpx;

    .user_header {
      width: 140rpx;
      height: 140rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
      border-radius: 8rpx;
    }

    .info_detail {
      .user_name {
        font-weight: 400;
        font-size: 30rpx;
        margin-bottom: 8rpx;
        color: #333;
      }

      .user_info {
        font-size: 26rpx;
        margin-bottom: 6rpx;
        color: #666;
      }
    }

    .no_login_box {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .nlb_top {
        font-weight: 500;
        font-size: 36rpx;
        color: #444;
      }

      .no_login_text {
        color: #666;
        font-size: 26rpx;
        margin-top: 6rpx;
      }
    }
  }

  .service_data {
    margin: 24rpx;
    padding: 24rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #363a44;
    line-height: 45rpx;
    background-color: #fff;
    border-radius: 12rpx;

    .sd_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sd_top .sdtop_title {
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-size: 32rpx;
    }

    .sd_top .out_box {
      width: 240rpx;
      height: 72rpx;
      background: #e7f4ff;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-around;
    }

    .out_box .out_image {
      width: 34rpx;
      height: 34rpx;
      flex-shrink: 0;
    }

    .data_card {
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      gap: 24rpx;
    }

    .data_card .dc_l {
      height: 285rpx;
      flex: 1;
      border-radius: 8rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(251, 225, 205, 1), rgba(249, 245, 242, 0)) 1 1;
      background: linear-gradient(225deg, #fff7f2 0%, rgba(249, 245, 242, 0) 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20rpx;
    }

    .dc_l .dcl_icon {
      width: 42rpx;
      height: 37rpx;
      flex-shrink: 0;
    }

    .dc_l .dcl_num {
      font-size: 52rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #363a44;
    }

    .dc_l .dcl_text {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #686b73;
    }

    .data_card .dc_r {
      height: 285rpx;
      flex: 1;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
    }

    .dc_r .dcr_t {
      height: 131rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(209, 242, 238, 1), rgba(237, 246, 245, 0)) 1 1;
      background: linear-gradient(217deg, #edf6f5 0%, rgba(237, 246, 245, 0) 100%);
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .dc_r .dcr_b {
      height: 131rpx;
      border: 1rpx solid;
      border-image: linear-gradient(180deg, rgba(230, 226, 252, 1), rgba(244, 242, 255, 0)) 1 1;
      background: linear-gradient(210deg, #f4f2ff 0%, rgba(244, 242, 255, 0) 100%);
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .dcrt_num {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #363a44;
    }

    .dcrt_text {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #686b73;
      font-size: 30rpx;
    }

    .dcrt_num {
      font-size: 42rpx;
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
    }
  }
}
</style>
